import React, { useEffect } from 'react';

// 在new Promise作用域外更改状态
// readyResolve： 一个resolve函数
// onReady： 接收回调函数，只有在readyResolve执行后才会执行
const onReadyFn = () => {
  let readyResolve: any = null;

  const readyPromise = new Promise((resolve) => {
    // 把 resolve 保存起来
    readyResolve = resolve;
  });

  const onReady = (cb: () => void) => {
    readyPromise.then(() => {
      // resolve 执行完才会走 then
      // 才会执行会调函数
      cb();
    });
  };

  return {
    onReady,
    readyResolve,
  };
};

export default onReadyFn;

// 使用
// 比如 App组件需要调用字典初始化数据，home页面接口调用依赖调用字典返回的数据
// 在正常情况下是先加载App，在加载home组件，没问题
// 但是在网络不好，App组件内调用字典接口响应比较慢，此时在调用home页面接口，这个时候，请求顺序是不能保证的
// 一定要让字典接口调用成功之后在调用home页面接口
// 巧用 Promise 解决上诉问题
// 在做这种需求的时候肯定要考虑到请求响应慢的时候的兜底，这种场景一看就可以使用 Promise 去兜底

// import onReadyFn from './useOnReadyFn';

function App() {
  const { readyResolve } = onReadyFn();

  const init = async () => {
    // 请求字典数据
    await fetch('');
    // 请求完数据，执行 readyResolve
    readyResolve();
  };

  useEffect(() => {
    init();
  }, []);

  return <div>app</div>;
}

function Home() {
  const { onReady } = onReadyFn();

  useEffect(() => {
    // 传入回调
    onReady(() => {
      console.log('执行完毕');
    });
  }, []);

  return <div>home</div>;
}
